import { View, Image, Text, Input } from '@tarojs/components'
import './index.scss'
import CloudIcons from '@/assets/ImageUrlConfig'
import { showToast, cloud, showLoading, hideLoading } from '@tarojs/taro'
import { useState, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { UpdateSpaceApi, RemoveSpaceApi, GetSpaceApi } from '@/api/index'

export default function DrawerSpaceSetting({ show, setShow, spaceId }) {
	const dispatch = useDispatch()
	const spaceStore = useSelector((state) => state.space)
	const recentStore = useSelector((state) => state.recent)
	const articleStore = useSelector((state) => state.article)

	let timer
	const Amination_Timer = 200
	const [isShowMask, setIsShowMask] = useState(false)
	const [drawerClassName, setDrawerClassName] = useState('drawer-space-setting')

	useEffect(() => {
		clearTimeout(timer)
		if (show) {
			setIsShowMask(true)
			timer = setTimeout(() => {
				setDrawerClassName('drawer-space-setting load')
			}, Amination_Timer)
			return
		}
		setDrawerClassName('drawer-space-setting')
		timer = setTimeout(() => {
			setIsShowMask(false)
		}, Amination_Timer)
	}, [show])

	const [isShowInputForInputNewName, setIsShowInputForInputNewName] = useState(false)
	const reNameSpace = (e) => {
		setIsShowInputForInputNewName(false)
		const newName = e.detail.value
		if (!newName) {
			return
		}
		showLoading({
			title: '修改中',
		})
		UpdateSpaceApi({
			_id: spaceId,
			name: newName,
		})
			.then(({ user, space }) => {
				dispatch({
					type: 'UPDATE_USER',
					payload: user,
				})
				if (recentStore[spaceId]) {
					const newRecentStore = { ...recentStore }
					newRecentStore[spaceId].name = newName
					dispatch({
						type: 'UPDATE_RECENT',
						payload: newRecentStore,
					})
				}
				if (spaceStore._id === spaceId) {
					dispatch({
						type: 'UPDATE_SPACE',
						payload: space,
					})
				}
			})
			.catch((err) => {
				showToast({
					title: '修改失败',
					icon: 'error',
					duration: 1000,
				})
				throw err
			})
			.finally(() => {
				hideLoading()
			})
	}

	const [makeSureDeleteSpace, setMakeSureDeleteSpace] = useState(false)
	const deleteSpace = () => {
		setMakeSureDeleteSpace(false)
		showLoading({
			title: '删除中',
		})
		RemoveSpaceApi({
			id: spaceId,
		})
			.then((data) => {
				dispatch({
					type: 'UPDATE_USER',
					payload: data,
				})
				if (recentStore[spaceId]) {
					const newRecentStore = { ...recentStore }
					delete newRecentStore[spaceId]
					dispatch({
						type: 'UPDATE_RECENT',
						payload: newRecentStore,
					})
				}
				if (articleStore.belong_space === spaceId) {
					dispatch({
						type: 'UPDATE_ARTICLE',
						payload: {},
					})
				}
				if (spaceStore._id === spaceId) {
					if (data.space?.[0]) {
						const newSpaceid = data.space[0]._id
						GetSpaceApi({
							id: newSpaceid,
						})
							.then((data) => {
								dispatch({
									type: 'UPDATE_SPACE',
									payload: data,
								})
							})
							.catch(() => {
								showToast({
									title: '服务器异常',
									icon: 'error',
									duration: 1000,
								})
							})
					} else {
						dispatch({
							type: 'UPDATE_SPACE',
							payload: {},
						})
					}
				}
			})
			.catch((err) => {
				showToast({
					title: '删除失败',
					icon: 'error',
					duration: 1000,
				})
				throw err
			})
			.finally(() => {
				hideLoading()
			})
	}

	return (
		<View
			className={isShowMask ? 'mask' : 'mask hiden'}
			onTap={() => {
				setShow(false)
			}}
		>
			<View
				className='space-setting-warp'
				onTap={(e) => {
					e.stopPropagation()
				}}
			>
				{/* 输入新名字 */}
				<View className={isShowInputForInputNewName ? 'input-for-rename load' : 'input-for-rename'}>
					{isShowInputForInputNewName ? <Input focus onConfirm={reNameSpace}></Input> : null}
				</View>
				{/* 是否确定删除 */}
				<View className={makeSureDeleteSpace ? 'sure-delete load' : 'sure-delete'}>
					<View
						className='cancel'
						onTap={() => {
							setMakeSureDeleteSpace(false)
						}}
					>
						取消
					</View>
					<View className='delete' onTap={deleteSpace}>
						删除
					</View>
				</View>

				<View className={drawerClassName}>
					<View className='settings'>
						<View
							class='item'
							onTap={() => {
								setIsShowInputForInputNewName((state) => !state)
								setMakeSureDeleteSpace(false)
							}}
						>
							<Image src={CloudIcons.changeName}></Image>
							<Text>修改名字</Text>
						</View>
						<View
							class='item'
							onTap={() => {
								setMakeSureDeleteSpace((state) => !state)
								setIsShowInputForInputNewName(false)
							}}
						>
							<Image src={CloudIcons.delete2}></Image>
							<Text>删除空间</Text>
						</View>
					</View>
				</View>
			</View>
		</View>
	)
}
